<template>
  <el-button
      :type="type"
      :size="size"
      :disabled="disabled"
      :loading="loading"
      :icon="icon"
      :round="round"
      :circle="circle"
      @click="$emit('click', $event)"
      class="my-button"
  >
    <slot />
  </el-button>
</template>

<script setup lang="ts">
import { ElButton } from 'element-plus'
import { PropType } from 'vue'
import type { ButtonType, ButtonSize, IconProp } from 'element-plus'

// 定义组件属性
const props = defineProps({
  type: {
    type: String as PropType<ButtonType>,
    default: 'default'
  },
  size: {
    type: String as PropType<ButtonSize>,
    default: 'medium'
  },
  disabled: {
    type: Boolean,
    default: false
  },
  loading: {
    type: Boolean,
    default: false
  },
  icon: {
    type: [String, Object] as PropType<IconProp>,
    default: ''
  },
  round: {
    type: Boolean,
    default: false
  },
  circle: {
    type: Boolean,
    default: false
  },
  // 自定义属性 - 增加一个特殊样式标识
  special: {
    type: Boolean,
    default: false
  }
})

// 定义组件事件
const emits = defineEmits(['click'])
</script>

<style scoped lang="scss">
.my-button {
  // 自定义样式
  &:hover {
    transform: translateY(-2px);
    transition: transform 0.2s ease;
  }

  // 特殊样式
  :deep(.el-button) {
    &.is-special {
      background: linear-gradient(135deg, #42b983 0%, #359469 100%);
      border-color: #42b983;

      &:hover {
        background: linear-gradient(135deg, #359469 0%, #2a7d56 100%);
        border-color: #359469;
      }
    }
  }
}
</style>
